 import {
   getCateListApi,
   addCateApi
 } from '@/api/cate'
 export default {
   data() {
     return {
       // 分页查询的条件
       queryInfo: {
         type: 3,
         pagenum: 1,
         pagesize: 5
       },
       // 总记录数
       total: 0,
       // 分类数据
       cateList: [],
       // 列模板
       columns: [{
           label: '分类名称',
           prop: 'cat_name'
         },
         {
           label: '是否有效',
           // 代表这个是模板列，需要使用插槽技术
           type: 'template',
           // 具名插槽
           template: 'isOk'
         },
         {
           label: '排序',
           // 代表这个是模板列，需要使用插槽技术
           type: 'template',
           // 具名插槽
           template: 'sort'
         },
         {
           label: '操作',
           type: 'template',
           template: 'opt'
         }
       ],
       // 控制添加分类的对话框
       addCateDialogVisible: false,
       // 添加分类表单数据
       addCateForm: {
         cat_name: '', // 分类名称
         cat_pid: 0, // 父级id
         cat_level: 0 // 层级，一级分类层级为0，二级分类层级为1，三级分类层级为2
       },
       // 添加分类的表单验证规则
       addCateFormRules: {
         cat_name: [{
           required: true,
           message: '请输入分类名称',
           trigger: 'blur'
         }]
       },
       // 级联菜单
       // 级联菜单选中时的父id,必须是数组，因为可能会接收一、二级分类
       selectedCatPid: [],
       // 一级和二级分类的数据
       parentCateList: [],
       // 级联菜单的配置项
       cascaderOptions: {
         // 是hover方式展开
         expandTrigger: 'hover',
         // 级联菜单收集的是id数据
         value: 'cat_id',
         // 显示的数据属性
         label: 'cat_name',
         // 层级之间的关联属性
         children: 'children',
         // 可以选中任意一级分类
         checkStrictly: true
       }
     }
   },
   created() {
     this.getCateList()
   },
   methods: {
     // 获取分类数据
     async getCateList() {
       const res = await getCateListApi(this.queryInfo)
       // console.log(res);
       this.cateList = res.result
       this.total = res.total
     },
     // 监听pagesize改变的事件
     handleSizeChange(newSize) {
       this.queryInfo.pagesize = newSize
       this.getCateList()
     },
     // 监听页码值改变的事件
     handleCurrentChange(newPage) {
       this.queryInfo.pagenum = newPage
       this.getCateList()
     },
     // 展示添加分类的对话框
     showAddCateDialog() {
       // 获取一、二级分类数据
       this.getParentCateList()
       this.addCateDialogVisible = true
     },
     // 获取一、二级分类数据
     async getParentCateList() {
       this.parentCateList = await getCateListApi({
         type: 2
       })
     },
     // 监听添加对话框关闭事件
     addDialogClosed() {
       this.$refs.addFormRef.resetFields()
       // 级联菜单的选项设置为空数组即可
       this.selectedCatPid = []
     },
     // 添加分类数据
     addCate() {
       this.$refs.addCateFormRef.validate(async valid => {
         if (!valid) return
         // 调接口
         // console.log(this.addCateForm);
          await addCateApi(this.addCateForm)
         // console.log(res);
         this.$message.success('添加分类数据成功')
         this.addCateDialogVisible = false
         this.getCateList()
       })
     },
     // 级联菜单发生改变时自动触发
     handleChange() {
       // 获取选中的数据
       // console.log(this.selectedCatPid);
       // 获取cat_level和cat_pid出来
       if (this.selectedCatPid.length === 0) {
         // 添加的是一级分类
         this.addCateForm.cat_pid = 0
         this.addCateForm.cat_level = 0
       } else {
         // 分类父id刚好事数组的最后一项,层级刚好是数组的长度
         this.addCateForm.cat_pid = this.selectedCatPid[this.selectedCatPid.length - 1]
         this.addCateForm.cat_level = this.selectedCatPid.length
       }
       // 实现下拉框自动收起效果，也可以使用侦听器，侦听选择值的改变就触发
       this.$refs.cateHandle.dropDownVisible = false
     }
   }
 }
